<!-- 这一页主要是20周年纪念特别网站 -->
<template>
  <div class="bg-gradient-blue">
    <h1>庆祝胡教授执教20周年</h1>
    <p>
      欢迎来到ipss课题组！我们致力于智能制造工程和工业工程领域的研究与人才培养。
    </p>
    <p>在过去的20年里，胡教授带领课题组取得了卓越的成就，推动了行业的发展。</p>
    <p>我们期待未来继续在胡教授的领导下，迎接更多挑战，创造更多辉煌。</p>
    <p>
      值此胡教授执教20周年之际，ipss课题组全体成员向胡教授致以最诚挚的祝贺和感谢！
    </p>
    <p>桃李芬芳二十载，教书育人铸辉煌</p>
  </div>

  <el-divider />

  <div style="padding-top: 30px">
    <el-carousel :interval="5000" arrow="always" height="650px">
      <el-carousel-item v-for="(page, pageIdx) in pagedCards" :key="pageIdx">
        <!-- 每页两行 -->
        <div
          v-for="(row, rowIdx) in page"
          :key="rowIdx"
          style="margin-bottom: 20px"
        >
          <el-row justify="space-evenly">
            <el-col v-for="(item, i) in row" :key="i" :span="5">
              <el-card shadow="always" class="card">
                <el-avatar size="large" :src="item.avatar" />
                <div class="name">{{ item.name }}</div>
                <div class="year">{{ item.year }}</div>
                <el-divider />
                <div class="message">“{{ item.message }}”</div>
                <!-- ✅ 只有当 item.emoticon 不为空时才渲染 -->
                <div v-if="item.emoticon">
                  <img
                    :src="item.emoticon"
                    alt="表情包"
                    style="width: 80px; height: auto; margin-top: 2px"
                  />
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>

  <el-divider />

  <!-- 时间线 -->

  <div class="honor-timeline">
    <div class="header">
      <h2>胡耀光教授执教 20 周年纪念</h2>
      <p class="subtitle">二十载春秋育桃李 · 躬耕教坛育栋梁</p>
    </div>

    <el-timeline>
      <el-timeline-item timestamp="2005年" type="primary" icon="el-icon-user">
        <el-card shadow="hover" class="event-card">
          <h3>开启教学生涯</h3>
          <el-row><el-tag type="success" effect="dark">任职</el-tag></el-row>
          <p>
            2005 年 9
            月，胡耀光教授正式加入北京理工大学，开启了二十年的执教之路。
          </p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2008年" type="success" icon="el-icon-s-flag">
        <el-card shadow="hover" class="event-card">
          <h3>主持国家重点项目</h3>
          <el-tag type="warning">科研</el-tag>
          <p>
            主持多项国家级科研项目，包括国家重点研发计划、国家自然科学基金等，带领团队开展工业工程与智能制造研究。
          </p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2012年" color="#E6A23C">
        <el-card shadow="hover" class="event-card">
          <h3>荣获教学成果奖</h3>
          <el-tag type="danger">荣誉</el-tag>
          <p>
            在教育教学领域不断探索创新，荣获
            <strong>国家级教学成果二等奖</strong> 与
            <strong>北京市教学成果一等奖</strong>。
          </p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item
        timestamp="2019-2020年"
        type="warning"
        icon="el-icon-reading"
      >
        <el-card shadow="hover" class="event-card">
          <h3>精品课程建设</h3>
          <el-tag type="info">课程</el-tag>
          <p>
            主讲课程《生产计划与控制》入选
            <el-tag size="small" type="success"
              >北京市优质本科课程（2019）</el-tag
            >
            ，并在
            <el-tag size="small" type="primary"
              >2020 年入选国家级一流课程</el-tag
            >。
          </p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2021年" type="info" icon="el-icon-trophy">
        <el-card shadow="hover" class="event-card">
          <h3>北京市高等学校教学名师</h3>
          <el-tag type="success" effect="dark">成就</el-tag>
          <p>
            荣获
            <strong>北京市高等学校教学名师奖</strong
            >，这是对其长期教学育人工作的高度认可。
          </p>
        </el-card>
      </el-timeline-item>

      <el-timeline-item timestamp="2025年" color="#F56C6C" icon="el-icon-medal">
        <el-card shadow="hover" class="event-card highlight">
          <h3>执教 20 周年纪念</h3>
          <el-tag type="danger" effect="dark">里程碑</el-tag>
          <p>
            胡耀光教授执教二十载，桃李满天下。20
            周年之际，全体师生共同庆祝这一荣耀时刻。
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { computed } from "vue";

// 卡片数据（可以从后端接口获取）
const cards = [
  {
    name: "王敬飞",
    year: "2023级在读博士",
    avatar: "/images/the_twentieth/wangjingfei.jpg",
    message:
      "感谢胡老师在我硕士及博士阶段的悉心指导与无私帮助，让我明确研究方向，稳步前行，受益匪浅。",
  },
  {
    name: "房浩楠",
    year: "2023级在读博士",
    avatar: "/images/the_twentieth/fanghaonan.jpg",
    message:
      "感恩胡师言传身教，授专业技能更育严谨态度与探索勇气，一路指引铭心！",
  },
  {
    name: "张正佩",
    year: "2024级在读博士",
    avatar: "/images/the_twentieth/zhangzhengpei.jpg",
    message:
      "感谢胡老师的教诲、指点与帮助。您的言传身教，不仅让我掌握了研究方法，更赋予了我独立探索的勇气与智慧。",
    // emoticon: "/images/emoticon/1.gif",
  },
  {
    name: "王铭伟",
    year: "2024级在读博士",
    avatar: "/images/the_twentieth/wangmingwei.jpg",
    message:
      "定科研航向，解我学术迷津；传治学要义，立我研究根基。感谢胡教授的指导！",
  },
  {
    name: "周鑫鑫",
    year: "2025级在读博士",
    avatar: "/images/the_twentieth/zhouxinxin.jpg",
    message:
      "感谢胡老师给予我继续深造的机会，未来我定勤勉努力，不辜负您的信任与栽培。",
  },
  {
    name: "刘雨乐",
    year: "2024级在读硕士",
    avatar: "/images/the_twentieth/liuyule.jpg",
    message:
      "无论是在本科阶段，还是在研究生阶段，每当我遇到困惑时，胡老师总是耐心地为我答疑解惑！！",
    // emoticon: "/images/emoticon/4.gif",
    // 感谢胡老师给予的悉心教导!
  },
  {
    name: "雷晨扬",
    year: "2024级在读硕士",
    avatar: "/images/the_twentieth/leichenyang.jpg",
    message:
      "感谢老师的悉心指导与耐心教诲，让我在学术探索中成长，在人生道路中找准方向，受益终身。",
  },
  {
    name: "万宣竹",
    year: "2024级在读硕士",
    avatar: "/images/the_twentieth/wanxuanzhu.jpg",
    message: "师恩如沐春风，感谢胡老师的悉心教导，祝愿老师平安顺遂，桃李满天下",
  },
  {
    name: "吴东昱",
    year: "2024级在读硕士",
    avatar: "/images/the_twentieth/wudongyu.jpg",
    message: "二十载春风化雨，传授的不只是知识，更是人生的方向",
  },

  {
    name: "马维军",
    year: "2024级在读硕士",
    avatar: "/images/the_twentieth/maweijun.jpg",
    message:
      "大三第一次听上胡教授的课时，便感受到了老师的热情和专业；平时对待学生也关怀有加，从胡老师身上学知识亦学行为处事。",
  },
  {
    name: "胡祥",
    year: "2024级在读硕士",
    avatar: "/images/the_twentieth/huxiang.jpg",
    message: "每当遇到困惑，胡老师的教诲让我受益匪浅，顺利解决难题",
  },
  // {
  //   name: "刘伟",
  //   year: "2022届毕业生",
  //   avatar:
  //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  //   message: "教授的教诲将伴随我一生。",
  // },
  // {
  //   name: "刘伟",
  //   year: "2022届毕业生",
  //   avatar:
  //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  //   message: "教授的教诲将伴随我一生。",
  // },
  // {
  //   name: "刘伟",
  //   year: "2022届毕业生",
  //   avatar:
  //     "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
  //   message: "教授的教诲将伴随我一生。",
  // },
];

// 每 3 个一组，用于 carousel 分页
const pagedCards = computed(() => {
  const pages = [];
  for (let i = 0; i < cards.length; i += 6) {
    const six = cards.slice(i, i + 6);
    // 再把 6 拆成两行，每行 3 个
    const rows = [];
    for (let j = 0; j < six.length; j += 3) {
      rows.push(six.slice(j, j + 3));
    }
    pages.push(rows);
  }
  return pages;
});
</script>

<style scoped>
.bg-gradient-blue {
  background: linear-gradient(to right, #1e40af, #3b82f6);
  color: white;
  padding: 20px;

  text-align: center;
  border-radius: 20px;
  margin-bottom: 50px;
  margin-top: 50px;
}

.el-carousel__item {
  color: #475669;
  /* opacity: 0.75; */
  /* line-height: 300px; */
  margin: 0;
  text-align: center;
}

.card {
  border-radius: 20px;
  text-align: center;
  height: 300px; /* 固定高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 保证内容分布均匀 */
}

.name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-top: 8px;
}

.year {
  font-size: 13px;
  color: #909399;
  margin-top: 2px;
}

.message {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}
</style>

<style scoped>
.honor-timeline {
  margin: 50px auto;
  max-width: 800px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: #666;
}

.event-card {
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.event-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.event-card p {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.highlight {
  /* border: 2px solid #f56c6c; */
  background: #fff5f5;
}
</style>
<!-- <template>

</template>

<script setup lang="ts">

</script>

<style  scoped>

</style> -->
